使用 float 時可以在有使用到 float 的元素後方加上有設定 clear: both 清除浮動的 div 就可以將 float 浮動清除
範例
例如範例中在 .content 中 .menu .article .sidebar 都使用 float，就在最後使用 float 的元素 ( .sidebar ) 後方加上 div ( .clearfix ) 並設定清除浮動樣式

 <section class="content">
    <ul class="menu">
      ...
    </ul>
    <div class="article">
      ...
    </div>
    <div class="sidebar">
      ...
    </div>
    <div class="clearfix"></div>
  </section>

.menu {
  width: 20%;
  float: left;
}
.article {
  width: 60%;
  float: left;
}
.sidebar {
  width: 20%;
  float: left;
}
.clearfix {
  clear: both;
}

不過同樣的做法就不適用於 ul li 結構，例如範例中的 .tag-list

 <div class="sidebar">
      <ul class="tag-list clear">
        <li><a href="#">tag1</a></li>
        <li><a href="#">tag2</a></li>
        <li><a href="#">tag3</a></li>
      </ul>
      <p>
        ...
      </p>
</div>

.tag-list li {
  float: left;
}
.tag-list a {
  display: block;
  padding: 10px;
}
.sidebar p {
  background-color: #ccc;
}
.clear:after {
  content: "";
  display: table;
  clear: both;
}

因 tag-list 是 ul li 結構，若是在 li 設定 float，依照原本的清除浮動語法就需在最後一個 li 後方加上 div，但是 ul 的子元素只能是 li，因此需使用另一個作法，也可以將 clear: both 設定在使用 float 元素的父元素 ( .tag-list )
並使用偽元素 (:after ) 來設定，這樣也等於在父元素的最後清除浮動，因爲 ::after 的位置會在父元素中的最後方

<ul class="tag-list clear">
	<li><a href="#">tag1</a></li>
	<li><a href="#">tag2</a></li>
	<li><a href="#">tag3</a></li>
  ::after
</ul>

因為偽元素 :after 原用意是可以在 HTML 元素後方加上內容，因此都會需要設定 content 屬性，沒有內容也需設定空字串 content: '';，因此在 :after 清除浮動也需設定 content: '';
又因為::before 和 ::after 預設都是 display: inline，因此還要設定display: table 才能清除浮動，也有看過使用 display: block 的方法，這部分自己沒有非常理解，這裡也附上相關討論
html - display: block; VS display: table; - Stack Overflow
What methods of ‘clearfix’ can I use?
自己測試是兩種方法都使可以清除浮動的

參考資料：
六角學院 HTML / CSS 課程
鼠年全馬鐵人挑戰 01：曾經困擾我的 float 問題 · 冠穎的筆記本